'use client'
import './index.scss'
import Cookies from 'js-cookie';
import { Button, Form, Input, message, Flex, Space } from 'antd';
import { useRouter } from 'next/navigation';
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import keyStore from '@/app/store/key';
import { useEffect } from 'react';
import { debounce } from '@/app/hook/limitation'
import { Login } from '@/app/api/index'


export default function page() {
    type FieldType = {
        username?: string;
        password?: string;
        remember?: string;
    };

    const router = useRouter(); 

    useEffect(() => {
    }, [])


    const originalOnFinish = async (values: any) => {
        const data = {
            email: "17801345541@163.com",
            language: "zh-Hans",
            password: "zdy123123",
            remember_me: true
        }
        const res: any = await Login(data)
        if ('status' in res) {
            message.error('账号或密码错误');
        } else {
            Cookies.set('access_token', res.data.access_token, { path: '/' })
            localStorage.setItem('access_token', res.data.access_token)
            localStorage.setItem('refresh_token', res.data.refresh_token)
            message.success('登录成功');
            router.push('/pages/home');
        }
    }

    const onFinish = debounce(originalOnFinish, 500);

    return (
        <div className="login" >
            <div className='logindiv'>

                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item<FieldType>
                        label="账号"
                        name="username"
                        rules={[
                            { required: true, message: '账号不可为空' }
                        ]}>
                        <Input prefix={<UserOutlined />} placeholder="账号" />
                    </Form.Item>

                    <Form.Item<FieldType>
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '密码不可为空' }]}
                    >
                        <Input.Password
                            prefix={<LockOutlined />}
                            placeholder="密码"
                        />
                    </Form.Item>
                    <Form.Item label={null}>
                        <Button block type="primary" htmlType="submit" >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
